<template>
  <div class="box">
    <!-- 搜索框 -->
    <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    @click="seek"
  />
</form>
<!-- B站热搜 -->
<div class="heads">
  <h4 class="top">B站热搜</h4>
  <h5>完整榜单></h5>
</div>

<div class="search">
   <div class="text1">
         <p class="pp1">建军95周年</p>
         <p class="pp2">唐山事件</p>
   </div>
   <div class="text1">
         <p class="pp1">凡人修仙传</p>
         <p class="pp2"> 完美世界</p>
   </div>
   <div class="text1">
         <p class="pp1">夏洛特烦恼</p>
         <p class="pp2">逗逼苍穹</p>
   </div>
   <div class="text1">
         <p class="pp1">进击的巨人</p>
         <p class="pp2">东京喰种</p>
   </div>
   <div class="text1">
         <p class="pp1">西红柿首富</p>
         <p class="pp2">恋爱大陆</p>
   </div>

</div>
<!-- 搜索历史 -->
<div class="seek">
<p class="p1">搜索历史</p>
<p class="p3">展开</p>
</div>
<div class="b1">
  <span class="iconfont icon-shanchu" >
     <p class="p2">清空搜索历史</p>
  </span>
</div>
<!-- 底部 -->
<div class="b2"> 
    <p class="p4">搜索发现</p>
    <p class="p5">显示</p>
 </div>


  
  </div>

</template>

<script>
// import router from '@/router';
import { Toast } from 'vant';

export default {
  data() {
    return {
      value: '',
    };
  },
  created(){
     this.aa = this.$route.query.id;
     console.log(this.aa);
      //  this.$http.post("/api/get_article_list", {
      //     // 请求参数
      //     // cate_id,
          
      //   })   
      //  .then((res) => {
      //     console.log(res);
      //   });
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.push('/#')
      Toast('取消搜索');
    },
    seek(){
      this.$http
        .post("/api/add_article", {
            skip:0,
            limit:7,
            // key_word,
        })
        .then((res) => {
          console.log(res);
        });
    }
  },
};


</script>

<style lang="less" scoped>
.box{
    height: 100vh;
        position: relative;
        z-index: 9;
        background-color: #fff;
}
    .heads{
      display: flex;
    }
    .heads h5{
      font-weight: normal;
      margin-top: 11.5px;
      margin-left:235px ;
       font-weight: 320;
    }
    .seek,.b2{
         display: flex;
    }
    .p1{
        margin-left:10px ;
    }
    .p2{
        margin-left:5px ;
      height: 40px;
      line-height: 10px;
      

    }
    .p3{
      height: 30px;
      line-height: 23px;
      margin-left:260px ; 
    }
   .p3{ 
     height: 40px;
      line-height: 35px;
      font-size: 70%;
        font-weight: 320;
    }
    .b1 {
      
         margin-left:130px ; 
        white-space: nowrap;
    }
    .b1 span{
      height: 40px;
      line-height: 40px;
       display:flex;
     
    }
    
    .b2{
        margin-top: 25px;
    }
    .p4{
        margin-left:10px ;
    }
    .p5{
      height: 40px;
      line-height: 35px;
      font-size: 70%;
        margin-left: 260px;
         font-weight: 320;
    }
    .b2 span{
        height: 50px;
        line-height: 50px;
       margin-left: 300px;
    }
    .top{
      text-align: left;
      margin-top:10px ;
        margin-left:10px ;
    }
    .text1 {
      margin-top:-20px ;
      display: flex;   
    }
    .pp1{
        white-space: nowrap;
        margin-left:10px ;
    }
    .pp2{
    
         white-space: nowrap;
         margin-left:175px ;
    }
  
</style>